<template>
	<view class="container">
		<view class="head">
			<uni-nav-bar class="ch-nav" height="88rpx" :backgroundColor="navBgColor" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="false" @clickLeft="$goBack(1)">
				<template slot="left">
					<image class="left" :src="!isBlack ? require('@/public/images/public/dhl_fhb.png') : require('@/public/images/public/dhl_fhjt.png')" mode="aspectFit"></image>
				</template>
				<text class="title">{{ isBlack ? '邀好友 享优惠' : '' }}</text>
			</uni-nav-bar>
			<view class="swiper-box flex-r" v-if="awardList[0]">
				<swiper class="swiper" autoplay="true" circular="true" :interval="1500">
					<swiper-item v-for="(award, index) in awardList" :key="index">
						<view class="swiper-item flex-c">
							<span class="item-title color-red">{{award.title}}</span>
							<span class="item-info">{{award.nickname}} 邀请好友成功</span>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="body flex-c">
			<view class="invite-award flex-c">
				<view class="title-btn">
					<text>邀好友得奖励</text>
				</view>
				<view class="award-list flex-r">
					<view class="award-item flex-c">
						<text class="item-title">•成功邀请•</text>
						<text class="item-value">{{myAward.inviteNum || 0}}</text>
					</view>
					<view class="award-item flex-c border">
						<text class="item-title">•奖励优惠券•</text>
						<text class="item-value">{{myAward.awardCouponNum || 0}}</text>
					</view>
					<view class="award-item flex-c">
						<text class="item-title">•奖励彩虹豆•</text>
						<text class="item-value">{{myAward.awardTotalBean || 0}}</text>
					</view>
				</view>
			</view>
			<view class="invite-rules flex-c" v-if="inviteRules">
				<view class="title-btn">
					<text>邀请规则</text>
				</view>
				<view class="rule-content">
					<text>1. 用户邀请一个好友安装注册，即可获得</text><text class="color-yellow">{{inviteRules.ruleDes}}{{inviteRules.awardValue}}张。\n</text>
					<text>2. 用户邀请的好友在平台消费满500彩虹豆，用户将</text><text class="color-yellow">获得100彩虹豆的奖励。\n</text>
					<text>3. 优惠券、彩虹豆不可提现、不可转赠、优惠券过期作废。\n</text>
					<text>4. 活动最终解释权归彩虹体育所有，若有发现利用非法漏洞参与活动，非法牟利或破坏计算机系统等行为，本平台保有法律途径手段与权利。</text>
				</view>
			</view>
		</view>
		<view class="foot bottom-ios flex-r">
			<view class="submit-box">
				<button type="default" @tap="$goByName('inviteqrcode')">立即邀请</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				awardList: [],
				myAward: {
					inviteNum: 0,
					awardCouponNum: 0,
					awardTotalBean: 0
				},
				inviteRules: null,
				
				isBlack: false,
				navBgColor: 'rgba(255,255,255,0)',
			}
		},
		computed: {
			user() {
				return this.$store.state.user
			}
		},
		onLoad() {
			console.log(this.$store.state.userToken);
			this.getAwardList()
			this.getInviteRules()
		},
		onShow() {
			this.getMyAward()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
			if(this.timer){
				return false
			}
			this.timer = setTimeout(()=>{
				this.setNavBgColor()
				this.timer = null
			}, 50);
		},
		methods: {
			//查询发出的奖励数据 
			getAwardList() {
				this.$http.get({
					url: '/api/appUser/queryInviteUserAwardRows',
					data: {
						pageSize: 40
					}
				}).then(data => {
					console.log(data);
					if(data.success && data.result && data.result.total){
						this.awardList = data.result.records
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//用户邀请人员的数据 
			getMyAward() {
				this.$http.get({
					url: '/api/appUser/queryUserInviteUserData',
					data: {
						userId: this.user.userId
					}
				}).then(data => {
					console.log(data);
					if(data.success && data.result){
						this.myAward = data.result
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//查询邀请规则
			getInviteRules() {
				this.$http.get({
					url: '/api/appUser/queryAppRuleRows',
					data: {
						type: 'inviteUser',
						userId: this.user.userId
					}
				}).then(data => {
					console.log(data);
					if(data.success && data.result){
						this.inviteRules = data.result[0]
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//设置导航区域背景色
			setNavBgColor() {
				let scrollTop = this.scrollTop
				switch (true){
					case scrollTop < 10:
						this.navBgColor = 'rgba(255,255,255,0)'
						this.isBlack = false
						this.navBorder = false
						break;
					case scrollTop < 20:
						this.navBgColor = 'rgba(255,255,255,0.1)'
						this.isBlack = false
						break;
					case scrollTop < 40:
						this.navBgColor = 'rgba(255,255,255,0.2)'
						this.isBlack = false
						break;
					case scrollTop < 80:
						this.navBgColor = 'rgba(255,255,255,0.4)'
						this.isBlack = true
						break;
					case scrollTop < 120:
						this.navBgColor = 'rgba(255,255,255,0.6)'
						this.isBlack = true
						break;
					case scrollTop < 150:
						this.navBgColor = 'rgba(255,255,255,0.7)'
						this.isBlack = true
						break;
					case scrollTop < 200:
						this.navBgColor = 'rgba(255,255,255,0.8)'
						this.isBlack = true
						break;
					case scrollTop > 300:
						this.navBgColor = 'rgba(255,255,255,1)'
						this.isBlack = true
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	.container{
		background: #FF1A1A;
	}
	.head{
		background-image: url("~@/public/images/other/yhypt.png");
		background-size: 100%;
		background-position: center -40rpx;
		background-repeat: no-repeat;
		.swiper-box{
			justify-content: center;
			background-image: url("~@/public/images/other/gb.png");
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: center;
			margin: 526rpx 20rpx 0;
			width: 710rpx;
			height: 220rpx;
			animation: background 0.3s linear infinite;
			@keyframes background {
				0%{
					background-image: url('~@/public/images/other/gb2.png');
				}
				100%{
					background-image: url('~@/public/images/other/gb.png');
				}
			}
			.swiper{
				margin-top: 30rpx;
				width: 650rpx;
				height: 145rpx;
				border-radius: 10rpx;
				.swiper-item{
					align-items: center;
					justify-content: center;
					height: 140rpx;
					.item-title{
						font-size: 36rpx;
						font-weight: 500;
						line-height: 36rpx;
					}
					.item-info{
						margin-top: 20rpx;
						font-size: 24rpx;
						line-height: 24rpx;
					}
				}
			}
		}
	}
	.body{
		margin: 0 20rpx;
		padding-bottom: calc(120rpx + var(--safe-area-inset-bottom));
		.title-btn{
			margin-top: 40rpx;
			width: 480rpx;
			height: 100rpx;
			text-align: center;
			background-image: url("~@/public/images/other/cjbt_bg.png");
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100%;
			z-index: 2;
			text{
				font-size: 32rpx;
				line-height: 95rpx;
				color: #FFFFFF;
			}
		}
		.invite-award{
			align-items: center;
			.award-list{
				align-items: center;
				margin-top: -50rpx;
				background-image: url("~@/public/images/other/jlsj.png");
				background-position: center;
				background-repeat: no-repeat;
				background-size: 100%;
				height: 284rpx;
				width: 100%;
				border-radius: 20rpx;
				.award-item{
					width: 33.33%;
					height: 158rpx;
					align-items: center;
					justify-content: center;
					&.border{
						box-sizing: border-box;
						border-left: 2rpx dotted #FF1C34;
						border-right: 2rpx dotted #FF1C34;
					}
					.item-title{
						font-size: 26rpx;
						color: #262626;
						line-height: 26rpx;
					}
					.item-value{
						margin-top: 25rpx;
						font-size: 60rpx;
						font-weight: bold;
						color: #F23030;
						line-height: 50rpx;
					}
				}
			}
		}
		.invite-rules{
			align-items: center;
			padding-bottom: 20rpx;
			.rule-content{
				width: 710rpx;
				margin-top: 25rpx;
				padding: 30rpx 20rpx;
				background: #E60000;
				border-radius: 20rpx;
				box-sizing: border-box;
				text{
					font-size: 26rpx;
					color: #FFFFFF;
					line-height: 40rpx;
				}
				.color-yellow{
					color: #FEEF00;
				}
			}
		}
	}
	.foot{
		max-width: $max-width;
		margin: $pc-margin;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		align-items: center;
		background: #FFFFFF;
		z-index: 5;
		.submit-box{
			margin: 0 20rpx;
			width: 100%;
			button{
				background: #FF1A1A;
			}
		}
	}
</style>
